<template>


	<div>
		<div class="flex-row justify-between" style="margin-bottom: 12px;">
			<div>
			<el-input v-model="query.RoleName" placeholder="姓名" style="width:200px"></el-input>
			<el-button type="success" @click="getData()" style="margin-left: 10px;" >查找</el-button>
			</div>
				<el-button type="success" @click="AddVisible=true">添加</el-button>
			
		</div>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column fixed prop="Id" label="序号" width="50">
			</el-table-column>
			<el-table-column prop="RoleName" label="姓名" width="120">
			</el-table-column>

			<el-table-column prop="Remark" label="职位" width="200">
			</el-table-column>
			<el-table-column prop="CreateTime" label="时间">
			</el-table-column>
			<el-table-column prop="IsDelete" label="是否正常" width="200">
			</el-table-column>
			<el-table-column fixed="right" label="操作">
				<template slot-scope="scope">

					<el-button type="text" size="small" @click="update(scope.row.Id)">编辑</el-button>
					<template>
						<el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info"
							icon-color="red" title="这是一段内容确定删除吗？" @confirm="Delete(scope.row.Id)">
							<el-button slot="reference" type="text" size="small" @click=""
								style="margin-left: 10px;">删除</el-button>
						</el-popconfirm>
					</template>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog :visible.sync="AddVisible">
			<role-add @close="()=>{AddVisible=false;getData()}"></role-add>
		</el-dialog>

		<el-dialog title="编辑" :visible.sync="UpdateVisible">
			<role-update @close="()=>{UpdateVisible=false;getData()}" :id="id" v-if="UpdateVisible"></role-update>
		</el-dialog>
	</div>
</template>

<script>
	import RoleApi from '@/api/RoleApi.js'
	import roleapi from '@/api/RoleApi.js'
	import RoleAdd from './RoleAdd.vue'
	import RoleUpdate from './RoleUpdate.vue'
	export default {
		data() {
			return {
				tableData: [{}],
				AddVisible: false,
				query: {
					RoleName: "",
					PageSize: 10,
					PageIndex: 1
				},
				UpdateVisible: false,
				id: 0
			}
		},
		methods: {
			getData() {
				roleapi.Query(this.query).then(res => {
					this.tableData = res.data.data
				})
			},
			handleClick(row) {
				console.log("row=", row);
				this.$message("Id=" + row.Id + "")
			},
			update(id) {
				this.UpdateVisible = true;
				this.id = id;
			},
			Delete(id) {
				RoleApi.Delete(id).then(res => {
					if (res.code == 1) {
						console.log(res);
						this.$message({
							message: "删除成功",
							type: "success"
						})
						this.getData()
						// this.$emit('close')						
					}
				})
			},
		},

		components: {
			RoleAdd,
			RoleUpdate
		},
		created() {
			this.getData()
		},


	}
</script>

<style>
</style>